<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogFormVisible"
    width="685px"
    @close="close"
  >
    <el-form
      ref="form"
      class="ownerForm"
      label-width="80px"
      :model="form"
      :rules="rules"
    >
      <div class="inline">
        <el-form-item label="姓名" prop="owner_name">
          <el-input v-model="form.owner_name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="联系方式" prop="owner_mobile">
          <el-input v-model="form.owner_mobile" placeholder="请输入手机号" />
        </el-form-item>
      </div>
      <div class="inline">
        <el-form-item label="证件号" prop="id_card">
          <el-input v-model="form.id_card" placeholder="请输入身份证号" />
        </el-form-item>
      </div>
      <div class="inline inlineDate">
        <el-form-item label="预定周期" prop="contract_start_date">
          <el-date-picker
            v-model="form.contract_start_date"
            format="yyyy-MM-dd"
            placeholder="请选择开始日期"
            type="date"
            value-format="yyyy-MM-dd"
            @change="changeStart"
          />
        </el-form-item>
        <span class="daterange">--</span>
        <el-form-item label-width="0" prop="contract_end_date">
          <el-date-picker
            v-model="form.contract_end_date"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="请选择结束日期"
            type="date"
            value-format="yyyy-MM-dd"
            @change="changeEnd"
          />
        </el-form-item>
        <el-radio-group
          v-model="setTime"
          :disabled="form.contract_start_date == null"
          size="small"
          @input="makeTime"
        >
          <el-radio-button label="1年">1年</el-radio-button>
          <el-radio-button label="2年">2年</el-radio-button>
          <el-radio-button label="3年">3年</el-radio-button>
          <el-radio-button label="5年">5年</el-radio-button>
        </el-radio-group>
      </div>
      <div class="inline">
        <el-form-item label="月租金">
          <el-input v-model="form.rent_price" placeholder="请输入月租金" />
        </el-form-item>
        <el-form-item label="押金">
          <el-input v-model="form.deposit_money" placeholder="请输入押金" />
        </el-form-item>
      </div>
      <div class="inline">
        <el-form-item label="付款方式">
          <el-select v-model="form.pay_months" placeholder="请选择付款方式">
            <el-option
              v-for="item in monthway"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="inline">
        <el-form-item label="收款银行">
          <el-input v-model="form.bank_name" placeholder="请输入收款银行" />
        </el-form-item>
        <el-form-item label="收款账号">
          <el-input v-model="form.bank_account" placeholder="请输入银行账号" />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { addOwner, editOwner } from '@/api/owner'
  import { isPhone, isIdCard } from '@/utils/validate'
  import { parseTime } from '@/utils/index'
  import dayjs from 'dayjs'
  export default {
    name: 'OwnerAdd',
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!isPhone(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
      const validateIdCard = (rule, value, callback) => {
        if (value && !isIdCard(value)) {
          callback(new Error('请输入正确的身份证号'))
        } else {
          callback()
        }
      }
      return {
        type: '',
        title: '业主信息',
        setTime: '',
        dialogFormVisible: false,
        form: {
          room_id: '',
          owner_name: '',
          owner_mobile: '',
          contract_start_date: parseTime(new Date(), '{y}-{m}-{d}'),
          contract_end_date: '',
          id_card: '',
          rent_price: '',
          pay_months: 1,
          deposit_money: '',
          bank_name: '',
          bank_account: '',
        },
        rules: {
          owner_name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          owner_mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { validator: validatePhone, trigger: 'blur' },
          ],
          id_card: [{ validator: validateIdCard, trigger: 'change' }],
          contract_start_date: [
            {
              required: true,
              message: '请选择开始日期',
              trigger: ['blur', 'change'],
            },
          ],
          contract_end_date: [
            {
              required: true,
              message: '请选择结束日期',
              trigger: ['blur', 'change'],
            },
          ],
        },
        monthway: [
          {
            value: 1,
            label: '每1月',
          },
          {
            value: 2,
            label: '每2月',
          },
          {
            value: 3,
            label: '每3月',
          },
          {
            value: 4,
            label: '每4月',
          },
          {
            value: 6,
            label: '每6月',
          },
          {
            value: 12,
            label: '每1年',
          },
          {
            value: 0,
            label: '一次性',
          },
        ],
      }
    },
    computed: {
      pickerOptions() {
        let startDateVal = this.form.contract_start_date
        return {
          disabledDate(time) {
            return time.getTime() < new Date(startDateVal).getTime()
          },
        }
      },
    },
    methods: {
      showEdit(type, row) {
        console.log(type, row)
        if (type == 'add') {
          this.form.room_id = row
        } else if (type == 'edit') {
          this.form = row
          this.form.owner_id = row.id
          this.form.owner_name = row.user_name
          this.form.owner_mobile = row.user_mobile
        }
        this.type = type
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
        this.form = this.$options.data().form
        this.$refs['form'].resetFields()
      },
      changeStart() {
        this.setTime = ''
      },
      changeEnd() {
        this.setTime = ''
      },
      makeTime(e) {
        if (e == '1年') {
          this.form.contract_end_date = this.addYear(1)
        } else if (e == '2年') {
          this.form.contract_end_date = this.addYear(2)
        } else if (e == '3年') {
          this.form.contract_end_date = this.addYear(3)
        } else if (e == '5年') {
          this.form.contract_end_date = this.addYear(5)
        }
      },
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.edit()
          }
        })
      },
      async edit() {
        if (this.type == 'add') {
          const { data } = await addOwner(this.form)
          if (data.is_success) {
            this.$baseMessage('添加成功', 'success', 'vab-hey-message-success')
            this.$emit('fetch-data', data.id)
            this.close()
          }
        } else if (this.type == 'edit') {
          const { data } = await editOwner(this.form)
          if (data.is_success) {
            this.$baseMessage('修改成功', 'success', 'vab-hey-message-success')
            this.$emit('fetch-data', data.info.id)
            this.close()
          }
        }
      },
      addYear(num) {
        return dayjs(new Date(this.form.contract_start_date))
          .add(num, 'y')
          .subtract(1, 'd')
          .format('YYYY-MM-DD')
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ownerForm {
    .inline {
      display: flex;
      .el-form-item {
        margin-right: 20px;
      }
      .el-input,
      .el-select {
        width: 175px;
      }
      &.inlineDate {
        .el-form-item:first-child {
          margin-right: 0;
        }
        .el-input {
          width: 155px;
        }
        .daterange {
          width: 30px;
          line-height: 32px;
          text-align: center;
        }
      }
    }
  }
</style>
